<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body>

<!--头部导航-->
<ul class="bsa-header">
    <!--   移动端侧边栏toggler -->
    <li>
        <div class="bsa-header-item bsa-sidebar-toggler">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索框表单部分  -->
    <li>
        <div class="bsa-header-item bsa-cursor-default bsa-search-form-wrapper">
            <form class="bsa-search-form" action="#">
                <input type="text" class="form-control bsa-search-form-control" name="keyword" aria-label="搜索关键词"
                       placeholder="搜索关键词">
                <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                <button class="bsa-search-close-btn" type="button"><i class="bi bi-x-lg"></i></button>
            </form>
        </div>
    </li>
    <!--  bsa提供的空白占位符助手类(可以让子项目左右分布) -->
    <li class="bsa-spacer"></li>
    <!--  移动端显示的搜索按钮(和搜索框是配套使用)      -->
    <li>
        <div class="bsa-header-item bsa-search-form-toggler">
            <i class="bi bi-search"></i>
        </div>
    </li>
    <!--   拓展应用(建议把拓展的连接放在这里,以免破坏头部的整体布局)  -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header  d-flex align-items-center justify-content-between">
                    <span class="bsa-fs-15">应用列表</span>
                    <a href="javascript:" class="text-muted bsa-fs-13 text-decoration-none">编辑</a>
                </div>
                <div class="card-body p-0">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3 p-3">
                            <a data-bsa-tab-url="pages/welcome.html?id=789456123" data-bsa-tab-title="邮箱"
                               class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-envelope"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">邮箱</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用2</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用3</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用4</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用5</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用6</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用7</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用8</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用9</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用10</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-wh-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis-2">拓展应用11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center ">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看更多应用</a>
                </div>
            </div>
        </div>
    </li>
    <!--    通知    -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown">
            <div class="position-relative">
                <span class="bsa-header-badge">99+</span>
                <i class="bi bi-bell"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header  d-flex align-items-center justify-content-between">
                    <span class="bsa-fs-15">通知列表</span>
                    <a href="javascript:" class="text-muted bsa-fs-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-wh-45 rounded-circle bsa-bg-color1 text-white">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">新订单</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                您收到新的订单
                            </div>
                            <div class="small text-muted">10秒前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-wh-45 rounded-circle bsa-bg-color2 text-white">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">新增用户</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                100个新用户注册
                            </div>
                            <div class="small text-muted">30分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-wh-45 rounded-circle bsa-bg-color3 text-white">
                            <i class="bi bi-chat-square-dots"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">新的评论</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                您收到客户新的评论
                            </div>
                            <div class="small text-muted">2天前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-wh-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">订单已经发货</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                您的商品已在运送途中
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-wh-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">新的同事</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                新增3位后台管理工作成员
                            </div>
                            <div class="small text-muted">1周前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有通知</a>
                </div>
            </div>
        </div>
    </li>
    <!--    消息    -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown">
            <div class="position-relative">
                <span class="bsa-header-badge">9</span>
                <i class="bi bi-chat-left"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header  d-flex align-items-center justify-content-between">
                    <span class="bsa-fs-15">消息列表</span>
                    <a href="javascript:" class="text-muted bsa-fs-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <img src="https://temp.im/120x120" class="bsa-wh-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">Jack</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                I'm fine
                            </div>
                            <div class="small text-muted">6分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <img src="https://temp.im/120x120" class="bsa-wh-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">Rose</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </div>
                            <div class="small text-muted">3小时前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <img src="https://temp.im/120x120" class="bsa-wh-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">Ben</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                Lorem ipsum dolor sit amet, consectetur.
                            </div>
                            <div class="small text-muted">1天前</div>
                        </div>
                    </a>
                    <a href="javascript:"
                       class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-cursor-hover">
                        <img src="https://temp.im/120x120" class="bsa-wh-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis-1">Emily</h5>
                            <div class="text-secondary bsa-ellipsis-2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
                                architecto autem corporis, eos illo illum itaque nemo nisi, optio sint vitae?
                                Accusantium dolor eius enim iste laudantium perferendis porro!
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center ">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有消息</a>
                </div>
            </div>
        </div>
    </li>
    <!--    颜色    -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-palette"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header  d-flex align-items-center justify-content-between">
                    <span class="bsa-fs-15">主题色列表</span>
                </div>
                <div class="card-body">

                    <h6>头部</h6>
                    <hr>
                    <div class="d-flex flex-wrap justify-content-start gap-3">
                        <div class="headercolor0"></div>
                        <div class="headercolor1"></div>
                        <div class="headercolor2"></div>
                        <div class="headercolor3"></div>
                        <div class="headercolor4"></div>
                        <div class="headercolor5"></div>
                        <div class="headercolor6"></div>
                        <div class="headercolor7"></div>
                        <div class="headercolor8"></div>
                    </div>

                    <h6 class="mt-4">侧边栏</h6>
                    <hr>
                    <div class="d-flex flex-wrap justify-content-start gap-3">
                        <div class="sidebarcolor0"></div>
                        <div class="sidebarcolor1"></div>
                        <div class="sidebarcolor2"></div>
                        <div class="sidebarcolor3"></div>
                        <div class="sidebarcolor4"></div>
                        <div class="sidebarcolor5"></div>
                        <div class="sidebarcolor6"></div>
                        <div class="sidebarcolor7"></div>
                        <div class="sidebarcolor8"></div>
                    </div>


                </div>
            </div>
        </div>
    </li>
    <!--    用户信息    -->
    <li class="dropdown">
        <div class="bsa-header-item" data-bs-toggle="dropdown">
            <div class="d-flex align-items-center">
                <img src="https://temp.im/120x120" class="bsa-user-avatar" alt="用户头像">
                <div class="bsa-user-details">
                    <div class="bsa-fs-15 bsa-ellipsis-1">欲饮琵琶码上催</div>
                    <div class="bsa-fs-13 bsa-ellipsis-1 bsa-user-role">超级管理员</div>
                </div>
            </div>
        </div>

        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:" data-bsa-tab-url="pages/profile.html" data-bsa-tab-title="个人资料"><i class="bi bi-person me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear me-2"></i>设置</a></li>
            <li><a class="dropdown-item bsa-clear-cache" href="javascript:"><i class="bi bi-trash me-2"></i>清空缓存</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>
<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="dist/img/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">Bootstrap-Admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul>
            <li>
                <a href="pages/welcome.html" class="active">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-pencil-square"></i>xx管理
                </a>
                <ul>
                    <li>
                        <a href="pages/list.html">xx列表</a>
                    </li>
                </ul>
            </li>

            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>其它页面
                </a>
                <ul>

                    <li>
                        <a href="pages/login.html" target="_blank">登录页面</a>
                    </li>
                    <li>
                        <a href="pages/login2.html" target="_blank">登录页面2</a>
                    </li>
                    <li>
                        <a href="pages/profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="pages/timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="pages/error.html">错误页面</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="pages/plugin-bootstrap-table.html">bootstrap-table</a></li>
                    <li><a href="pages/plugin-chart.html">chart.js</a></li>
                    <li><a href="pages/plugin-echarts.html">echart.js</a></li>
                    <li><a href="pages/plugin-sweetalert2.html">sweetalert2</a></li>
                    <li><a href="pages/plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="pages/plugin-tempus-dominus.html">日期时间</a></li>
                    <li><a href="pages/plugin-tinymce.html">tinymce</a></li>
                    <li><a href="pages/plugin-dropzone.html">文件上传</a></li>
                    <li><a href="pages/plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="pages/plugin-ztree.html">树形组件</a></li>
                    <li><a href="pages/plugin-select2.html">select2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="pages/multilevel.html?id=1">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="pages/multilevel.html?id=2">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="pages/multilevel.html?id=3">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="pages/multilevel.html?id=4">四级菜单</a></li>
                                            <li>
                                                <a href="javascript:" class="has-children">四级菜单</a>
                                                <ul>
                                                    <li><a href="pages/multilevel.html?id=5">五级菜单</a></li>
                                                    <li><a href="pages/multilevel.html?id=6">五级菜单</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="pages/welcome.html?id=789" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="pages/multilevel.html?id=1011">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--内容区域-->
<div class="bsa-page-wrapper">
    <div class="bsa-main"></div>
</div>
<!--版权信息-->
<div class="bsa-footer">
    <p class="mb-0">Copyright © 2022. All right reserved.</p>
</div>

<script src="plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/bootstrap-admin.min.js"></script>
<script>
    const main = new BSA.Main({
        consoleLog: false,
        defaultTabs: [
            {
                title: '首页',
                url: 'pages/welcome.html',
                close: false
            }
        ]
    });
</script>

</body>
</html>